<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			fieldset,
			img,
			input,
			button {
				border: none;
				padding: 0;
				margin: 0;
				outline-style: none;
			}
			
			ul,
			ol {
				list-style: none;
				margin: 0px;
				padding: 0px;
			}
			
			#box {
				width: 405px;
				margin: 200px auto;
				position: relative;
			}
			
			#txtSearch {
				float: left;
				width: 300px;
				height: 32px;
				padding-left: 4px;
				border: 1px solid #b6b6b6;
				border-right: 0;
			}
			
			#btnSearch {
				float: left;
				width: 100px;
				height: 34px;
				font: 400 14px/34px "microsoft yahei";
				color: white;
				background: #3385ff;
				cursor: pointer;
			}
			
			#btnSearch:hover {
				background: #317ef3;
			}
			
			#pop {
				width: 303px;
				border: 1px solid #ccc;
				padding: 0px;
				position: absolute;
				top: 34px;
			}
			
			#pop ul li {
				padding-left: 5px;
			}
			
			#pop ul li:hover {
				background-color: #CCC;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<input type="text" id="txtSearch">
			<input type="button" value="百度一下" id="btnSearch">
		</div>
		<script type="text/javascript">
			var datas = ["a", "bc", "abbbb", "cxxxx", "cxyz", "abcdef", "czzzz"];
			var txtSearch = document.getElementById("txtSearch");
			var box = document.getElementById('box');

			//	匹配数据,创建匹配的数据库
			txtSearch.onkeyup = function() {
				var newdata = [];
				for(i = 0; i < datas.length; i++) {
					var data = datas[i];
					//	数据库中的每一项去匹配输入的值,只要有及可不一定完全匹配
					var index = data.indexOf(txtSearch.value);
					if(index !== -1) {
						newdata.push(data);
					}
				}
				//	如果之前创建过下拉盒子，移除
				var pop = document.getElementById("pop");
				if(pop) {
					box.removeChild(pop);
				}
				//	如果输入的值为空不创建
				if(txtSearch.value.length == 0) {
					return;
				}
				//  没有匹配的数据则不创建
				if(newdata.length == 0) {
					return;
				}

				// 创建下拉盒子
				var div = document.createElement('div');
				div.id = "pop"; //用于设置样式的id
				var ul = document.createElement('ul');
				box.appendChild(div);
				div.appendChild(ul);
				for(i = 0; i < newdata.length; i++) {
					var li = document.createElement('li');
					li.innerHTML = newdata[i];
					ul.appendChild(li);
				}
			}
		</script>
	</body>

</html>